<template>
    <div>
        <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" class="header"/>
        <div class="logo">
            <img src="../../../static/img/logo.png" />
        </div>
        <!-- 注册表单 -->
        <van-cell-group class="registerInput">
            <!-- 手机号 -->
            <van-field 
                class="telephone"
                type="telephone"
                v-model="telephone"
                left-icon="phone-o"
                placeholder="输入手机号"
            />
            <van-field  class="verificationCode"
                v-model="verificationCode"
                placeholder="输入短信验证码"
                left-icon="envelop-o"
                >
                <van-button slot="button" size="small" type="primary" @click="$toast('验证码已发送')" class="sendCode">发送验证码</van-button>
            </van-field>
             <van-field 
                class="username"
                v-model="username"
                left-icon="user-o"
                placeholder="设置用户名"
            />
            <van-field 
                class="password"
                v-model="password"
                left-icon="closed-eye"
                placeholder="设置密码"
            />
        </van-cell-group>
        <van-button type="danger" class="registerBtn" @click="registerCheck">注册</van-button>
    </div>
</template>
<script>

export default {
    data() {
        return {
            telephone:"",
            verificationCode:"",
            username:"",
            password:"",
        };
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        registerCheck(){
            this.$toast("注册成功!")
            this.$router.push("/login");
        }
    },
};
</script>
<style scoped  lang="">
.van-nav-bar{
    background-color:#ff6341;
}
.van-nav-bar .van-icon {
    color:white;
}
.van-nav-bar__title {
    color: white;
}
.logo {
    text-align: center;
    margin: 90px auto 60px;
}
.logo img {
    width: 30%;
}
/* 清除vant表单的默认样式 */
[class*=van-hairline]::after{
    border:0;
}
/* 清除vant表单的默认样式 */
.van-cell:not(:last-child)::after {
    border-bottom: 0;
}
.registerInput{
    width:6.1rem;
    margin:0 1rem 1rem 2.133333rem;
    border:0px;
}
.registerInput>*{
    margin-bottom:.266667rem;
    border-bottom: .053333rem solid #f9f9fa;
}
.verificationCode{
    overflow:hidden;
    position:relative;
}
.van-button--small {
    padding:0;
    height:.75rem;
    line-height:.75rem;
}
.sendCode{
    background-color:white;
    color:#ff6341;
    text-align:center;
    border:0;
    position:absolute;
    right:0;
    top:0;
}

/* 注册按钮 */
.registerBtn{
    display:block;
    width:7.333333rem;
    border-radius:.266667rem;
    color:white;
    height:1.066667rem;
    margin: auto;
    background-color:#ff6341;
    margin-bottom:.546667rem;
    box-shadow: 0 0.075rem 0.075rem rgba(0, 0, 0, 0.3);
}
</style>